<template>
  <div class="person">
    <h2>一辆车：{{ car.brand }} {{ car.model }} 价值：{{ car.price }}万</h2>
    <button @click="changePrice">修改汽车的价格</button>
    <br />
    <h2>游戏列表：</h2>
    <ul>
      <!-- v-bind:key="game.id" 给每一个游戏项添加一个唯一的标识符 -->
      <li v-for="game in games" :key="game.id">{{ game.name }}></li>
    </ul>
    <button @click="changeFirstGameName">修改第一个游戏的名字</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref } from 'vue'

// 数据
let car = ref({
  brand: 'Toyota',
  model: 'Camry',
  price: 100
})

let games = ref([
  {id:'hs', name: '王者荣耀'},
  {id:'lol', name: '英雄联盟'},
  {id:'dota', name: 'DOTA2'},
  {id:'cf', name: 'Call of Duty'},
  {id:'wow', name: '魔兽世界'}
])

// console.log(car)
// // 原生内置的构造函数
// console.log(Proxy)

// 方法
function changePrice() {
  car.value.price += 10
  console.log(car.value.price)
}
function changeFirstGameName() {
  games.value[0].name = '王者荣耀：起源'
}
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px
}

button {
  margin: 0 5px;
}
li {
  font-size: 20px;
}
</style>